import React, { useState, useEffect } from 'react';
import { Tabs } from 'antd';
import BaseData from './BaseData';
import BusinessData from './BusinessData';
import DeviceData from './DeviceData';
import FlowLogs from './FlowLogs';

const { TabPane } = Tabs;

export default function StrategyLogs(props) {
  console.log(123, props);
  const {
    strategyData = {},
    strategy_detail = {},
    base_data = [],
    business_data = [],
    device_data = [],
    variables = [],
    edge_configs = [],
  } = props.data || {};
  const strategy_data = strategyData;
  const { strategyDetail, preFormList, returnDetail } = props;
  const [returnVariables, setReturnVariables] = useState([]);
  useEffect(() => {
    if (strategyDetail.config) {
      setReturnVariables(strategyDetail.config.mode.return_variables || []);
    }
  }, [strategyDetail]);
  return (
    <div className='card-container'>
      <Tabs defaultActiveKey='1'>
        <TabPane tab='策略详情' key='1'>
          {strategyDetail.config && (
            <FlowLogs
              flows={strategyDetail.config.mode.flows}
              strategy_data={strategy_data}
              variables={variables}
              using_variables={strategy_detail.using_variables}
              edge_configs={edge_configs}
              return_variables={returnVariables}
              name={strategyDetail.name}
              app_id={strategy_detail.app_id}
              event_id={strategy_detail.event_id}
            />
          )}
        </TabPane>
        <TabPane tab='前置表单' key='2'>
          <BusinessData value={preFormList} />
        </TabPane>
        {/* <TabPane tab='设备属性' key='3'>
          <DeviceData data={device_data} />
        </TabPane> */}
        <TabPane tab='返回变量' key='4'>
          <BaseData variables={variables} return_variables={returnVariables} returnResults={returnDetail} />
        </TabPane>
      </Tabs>
    </div>
  );
}
